<template>
    <div class="details_basicInfo">
        <div class="basicInfo_details">
            <div class="details_item">
                <span class="label">工单状态</span><span class="item_content">已关闭</span>
            </div>
            <div class="details_item">
                <span class="label">工单类型</span>
                <span class="item_content">报修-汽机系统</span>
            </div>
            <div class="details_item">
                <span class="label">工单来源</span>
                <span class="item_content">用户申请</span>
            </div>
            <div class="details_item">
                <span class="label">工单编号</span>
                <span class="item_content">BX006202008280001</span>
            </div>
            <div class="details_item">
                <span class="label">创建时间</span>
                <span class="item_content">2024.03.14 14:23:04</span>
            </div>
            <div class="details_item">
                <span class="label">创建人</span>
                <span class="item_content">王二</span>
            </div>
            <div class="details_item">
                <span class="label">报修人</span>
                <span class="item_content">李斯</span>
            </div>
            <div class="details_item">
                <span class="label">报修人联系方式</span>
                <span class="item_content">13800138000</span>
            </div>
            <div class="details_item">
                <span class="label">所属专业</span>
                <span class="item_content">热控专业</span>
            </div>
            <div class="details_item details_item2">
                <span class="label">内容</span>
                <span class="item_content">汽包上壁温度过高</span>
            </div>
            <div class="details_item">
                <span class="label">预约开始处理时间</span>
                <span class="item_content">2024.03.14 14:23:04</span>
            </div>
            <div class="details_item">
                <span class="label">预约结束处理时间</span>
                <span class="item_content">2024.03.14 14:23:04</span>
            </div>
        </div>
        <div class="basicInfo_details alarmInfo">
            <div class="commonHead">
                <div class="view_line"></div>
                <span>报警信息</span>
            </div>
            <div class="details_item">
                <span class="label">报警等级</span><span class="item_content">紧急</span>
            </div>
            <div class="details_item details_item3">
                <span class="label">报警类型</span>
                <span class="item_content">设备报警-汽机系统-汽包过热</span>
            </div>
            <div class="details_item details_item2">
                <span class="label">关联设备</span><span class="item_content">设备名称（设备编号）</span>
            </div>
        </div>
        <div class="processRecord">
            <div class="commonHead">
                <div class="view_line"></div>
                <span>处理记录</span>
            </div>
            <el-table :data="tableData.list" border max-height="295px" style="width: 100%"
                empty-text='暂无数据' stripe :scrollbar-always-on="true">
                <el-table-column label="处理时间" property="dptName" />
                <el-table-column label="处理结果" property="dptName" />
                <el-table-column label="处理方式" property="dptName" />
                <el-table-column label="外委单位" property="dptName" />
                <el-table-column label="处理人员" property="dptName" />
                <el-table-column label="配合班组成员" property="dptName" />
                <el-table-column label="维修耗材" property="dptName" />
                <el-table-column label="是否收费" property="dptName" />
                <el-table-column label="收费金额" property="dptName" />

            </el-table>
        </div>
        <div class="processRecord">
            <div class="commonHead">
                <div class="view_line"></div>
                <span>验收记录</span>
            </div>
            <el-table :data="tableData.list" border max-height="295px" style="width: 100%"
                empty-text='暂无数据' stripe :scrollbar-always-on="true">
                <el-table-column label="验收时间" property="dptName" />
                <el-table-column label="验收结果" property="dptName" />
                <el-table-column label="验收人" property="dptName" />
                <el-table-column label="备注" property="dptName" />

            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { flexWidth } from '@/utils/utils'
let detais = reactive({
    result: {} as any
})

let tableData = reactive({
    list:[
        {name:'111'},
        {name:'111'},
        {name:'111'},
        {name:'111'},
    ]
})
</script>

<style lang="scss" scoped>
.details_basicInfo {
    margin-top: 10px;

    .basicInfo_details {
        padding: 0px 0 0px 0;
        display: flex;
        flex-wrap: wrap;

        .details_item {
            display: flex;
            margin-bottom: 10px;
            width: 33.33%;

            &.details_item2 {
                width: 100%;
            }

            &.details_item3 {
                width: 66.66%;
            }

            .label {
                width: 128px;
                text-align: right;
                display: inline-block;
                margin-right: 30px;
                flex-shrink: 0;
                color: rgb(112, 105, 95);
            }

            .item_content {
                flex: 1;
            }
        }
    }

    .commonHead {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 700;

        .view_line {
            width: 2px;
            height: 15px;
            background-color: #c0a45b;
            display: inline-block;
            margin-right: 9px;
        }
    }
    .el-table {
        margin: 10px 0;
    }
}
</style>
